<template>
<div style="background: #f6f6f8" class="top case_details" v-loading="loading" >
  <div v-if="preview" style="margin-bottom: 1.5rem">
    <div  class="banner0" :style="{background: preview.caseBgColor}">
      <div class="name0">{{preview.caseName}}</div>
      <div class="des0">{{preview.caseSlogan}}</div>
    </div>
    <div class="main0" v-if="preview.caseDetailImg.length > 0">
      <img v-for="item in preview.caseDetailImg" v-lazy="baseURL + item" :key="item" class="img0">
    </div>
  </div>
  <Footer/>
</div>
</template>

<script>
import detailJs from './detailJs'
export default detailJs
</script>

<style scoped>
  .case_details .main0{max-width: 1000px; margin: -10rem auto 0 auto}
  .case_details .img0{width: 100%;display: block}
  .case_details .banner0{width: 100%; height: 600px;  padding-top: 120px}
  .case_details .name0{max-width: 1020px; padding: 0 1rem; margin: 0 auto; color: #fff; font-size: 2.2rem; font-weight: 600;}
  .case_details .des0{max-width: 1020px; padding: 0 1rem; margin: 0 auto; font-size: 1.3rem;line-height: 2.4rem; color: #fff; margin-top: 20px}
  .case_details .hidden{opacity: 0; position: fixed;}
</style>
